<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="txt"></ul>
</body>
</html>
<script>

    const domP = document.querySelector('.txt')

    const o = {
        name: 'ming',
        age: 27
    }
    
    //render 渲染
    

    function render(data) {
        return domP.innerHTML = `
            <li style= "list-style:none;">
                <span>姓名：</span>
                <span>${data.name}</span>
            </li>
            <li style= "list-style:none;">
                <span>年龄：</span>
                <span>${data.age}</span>
            </li>
        `
    }

    render(o)

    function color(obj,render){
        let colorObj = {}
        for(const key in o){
            Object.defineProperty(colorObj,key,{
                get(){
                    return o[key]
                },
                set(val){
                    o[key] = val;
                    render(o)
                }
            })
        }
        return colorObj
    }

    const vm = color(o,render)

</script>